import React, { useState, useEffect, useRef } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; //动画库
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //模型加载器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"; //模型解压缩
import Stats from "stats.js"; //性能监控

const ModleTest = () => {
  const width = useRef(window.innerWidth).current;
  const height = useRef(window.innerHeight).current;

  //  性能状态监视
  const stats = useRef(new Stats()).current;
  stats.dom.style.position = "absolute";
  stats.dom.style.top = "absolute";

  const gltfLoader = useRef(new GLTFLoader()).current; //gltf模型加载器
  const dracoLoader = useRef(new DRACOLoader()).current; //模型解压缩
  dracoLoader.setDecoderPath("./draco");
  gltfLoader.setDRACOLoader(dracoLoader);

  const scene = useRef(new THREE.Scene()).current;
  const camera = useRef(
    new THREE.PerspectiveCamera(15, width / height, 0.1, 10000)
  ).current;
  const texture = useRef(new THREE.TextureLoader()).current.load(
    "./logo512.png"
  );
  const renderer = useRef(new THREE.WebGLRenderer({ antialias: true })).current;
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xbfd1e5); //设置颜色及其透明度
  renderer.setPixelRatio(window.devicePixelRatio); //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
  const Controls = useRef(
    new OrbitControls(camera, renderer.domElement)
  ).current;
  Controls.enableDamping = true; // 开启阻尼
  Controls.dampingFactor = 0.1; //阻尼惯性
  Controls.minPolarAngle = 0; //轨道控制器直旋转的角度的下限
  Controls.maxPolarAngle = Math.PI / 2; //轨道控制器直旋转的角度的上限 默认是 Math.PI Math.PI / 2

  camera.position.set(
    2664.9245606615355,
    1087.5008783617623,
    2725.7088849591614
  );

  //   Controls.addEventListener('change',()=>{
  //         console.log(camera.position,'camera.positioncamera.positioncamera.position')
  //   })
  useEffect(() => {
    document.body.appendChild(renderer.domElement);
    document.body.appendChild(stats.dom);
    renderer.domElement.addEventListener("click", onClick);
    console.log(width, height);
  }, [renderer]);
  gltfLoader.load("./scene.gltf", (module) => {
    console.log(module, "1111111111");
    scene.add(module.scene);
  });

  const axesHelper = new THREE.AxesHelper(10);
  scene.add(axesHelper);
  const ambientLight = new THREE.AmbientLight(0xffffff);
  scene.add(ambientLight);
  var material1 = [
    new THREE.MeshLambertMaterial({
      color: 4244200,
      opacity: 1,
      transparent: true,
    }),
    new THREE.MeshLambertMaterial({
      color: 3500454,
      opacity: 1,
      transparent: true,
    }),
    new THREE.MeshLambertMaterial({
      color: 3757225,
      opacity: 1,
      transparent: true,
    }),
    new THREE.MeshLambertMaterial({
      color: 9145712,
      opacity: 1,
      transparent: true,
    }),
    new THREE.MeshLambertMaterial({
      color: "red",
      opacity: 1,
      transparent: true,
      map: texture,
    }),
    new THREE.MeshLambertMaterial({
      color: 3120771,
      opacity: 1,
      transparent: true,
    }),
  ];

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial();
  const cube = new THREE.Mesh(geometry, material1);
  scene.add(cube);
  const onClick = () => {
    // geometry.parameters.width=10
    // cube.scale.x = 5;
    console.log(cube);
    // cube.material[4].opacity =1
    // gsap.to([cube.position], {

    //   y: 0.5,

    //   duration: 2,
    //   ease: 'power1.inOut',
    // });
    console.log("123123123123", geometry);
  };
  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);

    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;

    renderer.render(scene, camera);
    Controls.update(); // 开启阻尼
    stats.update(); // 性能监测需要 循环调用这个函数
  }

  animate();
  return (
    <>
      <div id="id"></div>
    </>
  );
};

export default ModleTest;
